<template>
  <div class="biz-container">
    <table-layout :haveSider="false">
      <template #headCustom>
        <a-steps
          :current="1"
          style="margin:10px 0"
          size="small"
        >
          <a-step title="完善配送商品明细" />
          <a-step title="完善发票" />
          <a-step title="完善配送单信息" />
          <a-step title="预览并提交" />
        </a-steps>
      </template>
      <template #batchOperat>
        <batch-operat-btn>
          <template #cusBtn>
            <a-button
              type="primary"
              icon="plus-circle"
              @click="onAdd"
              size="small"
            > 新增发票 </a-button>
          </template>
        </batch-operat-btn>
      </template>
      <template #tableList="slotData">
        <a-list-table
          tableId="invoicesTable1"
          :columns="columns"
          :tableData="listdata"
          :pagination="pagination"
          :isSelecttion="false"
          :loading="loading"
          :scroll="{y:slotData.tableHeight-60}"
          @onTableChange="handleTableChange"
          @onselectChange="onselectChange"
          @onAction="onAction"
          :links="links"
          @onTouchlinkCell="onTouchlinkCell"
        >
        </a-list-table>
        <div style="height:40px;textAlign:center;marginTop:10px">
          <a-button
            type="primary"
            @click="onPrevious"
          >上一步</a-button>
          <a-button
            type="primary"
            @click="onJump"
            style="marginLeft:20px"
          >跳过</a-button>
          <a-button
            type="primary"
            @click="onNext"
            style="marginLeft:20px"
          >下一步</a-button>
        </div>
      </template>

    </table-layout>
    <addModal
      ref="addModal"
      @onSubmit="onSubmit"
      @ok="handleModalSaveOk"
      @close="handleModalCancel"
    />
  </div>
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import addModal from './addModal.vue'
import moment from 'moment'
import {
  getDetailByConditions,
  getDetailByConditionsCount,
} from '../saleOrder/saleOrder'


const columns = [
  // { title: '结算单号', dataIndex: 'settlementNo', key: 'settlementNo', align: 'center' },
  { title: '买方单位', dataIndex: 'customerName', key: 'customerName', align: 'center' },
  // { title: '关联销售订单', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center' },
  // { title: '买方税号', dataIndex: 'customerTaxNo', key: 'customerTaxNo', align: 'center' },
  // { title: '买方地址电话', dataIndex: 'customerAddrTell', key: 'customerAddrTell', align: 'center' },
  // { title: '买方银行账号', dataIndex: 'customerAccountNum', key: 'customerAccountNum', align: 'center' },
  // { title: '开具单位', dataIndex: 'supplierOrgName', key: 'supplierOrgName', align: 'center' },
  // { title: '开具单位税号', dataIndex: 'supplierTaxNo', key: 'supplierTaxNo', align: 'center' },
  // { title: '开具单位地址电话', dataIndex: 'supplierAddrTel', key: 'supplierAddrTel', align: 'center' },
  // { title: '开具单位银行账号', dataIndex: 'supplierAccountNum', key: 'supplierAccountNum', align: 'center' },
  { title: '发票种类', dataIndex: 'invoiceType', key: 'invoiceType', align: 'center' },
  { title: '发票号码', dataIndex: 'invoiceNo', key: 'invoiceNo', align: 'center' },
  { title: '发票代码', dataIndex: 'invoiceCode', key: 'invoiceCode', align: 'center' },
  // { title: '红票标志', dataIndex: 'redFlag', key: 'redFlag', align: 'center' },
  // { title: '无税总价', dataIndex: 'totalIunitprice', key: 'totalIunitprice', align: 'center',scopedSlots: { customRender: 'tofixed2' }  },
  { title: '含税总价', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center' ,scopedSlots: { customRender: 'tofixed2' } },
  { title: '税率', dataIndex: 'tax', key: 'tax', align: 'center', scopedSlots: { customRender: 'percentage' } },
  // { title: '税额', dataIndex: 'taxes', key: 'taxes', align: 'center' },
  { title: '状态', dataIndex: 'invoiceState', key: 'invoiceState', align: 'center' },
  { title: '操作', dataIndex: 'action', key: 'operation', width: 180, align: 'center', scopedSlots: { customRender: 'action' } },
]
let links = ['saleOrderNo',]

export default {
  components: {
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListInfo,
    aListTable,
    addModal
  },
  data () {
    return {
      columns: columns,
      listdata: [],
      links: links,
      loading: false,
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      // 查询表单
      q_formInfos: [
        { label: '销售单号', name: 'saleOrderNo', type: 'input', placeholder: '销售单号' },
        { label: '客户名称', name: 'customerName', type: 'customer', placeholder: '客户名称' },
        { label: ['查询', '重置'], type: 'botton' }
      ],
      // 查询表单绑定数据
      q_formDatas: {
        saleOrderPid: "4a421c5e8bc2444b981c575584d94299",
        // saleOrderNo: null,
        // customerName: null,
        // saleOrderState:'待配送'
      },
      pData: {}, // 条件查询参数
      isJump: false,
      optText: '确认订单',
      selectedRowKeys: [],
      selectedRows: [],
      notAudit: false,
    }
  },
  computed: {},

  mounted () {
    // this.getTotal()
    // this.getList(this.q_formDatas)

  },
  methods: {
    // 初始化页面时得到总数
    async getTotal () {

    },
    // 初始化查询时的数据列表
    async getList (params) {

    },
    // 关闭模态详细框
    handleModalCancel () {
    },
    // 模态详细框提交按钮
    handleModalSaveOk () {
      this.getList(this.q_formDatas)
    },
    onAdd () {
      this.$refs.addModal.addModal()
    },
    onSubmit (val) {
      console.log(val);
      this.listdata.push({
        key: moment(new Date).format("YYYYMMDDhhmmss"),
        ...val,
        action: ['删除']
      })
    },
    // 操作按钮
    onAction (text, record, index) {
      if (text == '删除') {
        this.listdata.splice(index, 1)
      }
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getList(this.q_formDatas)
    },
    // 查询按钮
    onFind () {
      this.pagination.current = 1
      this.getTotal()
      this.getList(this.q_formDatas)
    },

    onTouchlinkCell (text, record, index, link) {
      console.log(record);
      if (link == 'saleOrderNo') {
        this.$refs.viewSaleOrderModal.showModal(record.pid, record)
      }
    },
    // 多选批量操作
    onselectChange (selectedRowKeys, selectedRows) {
    },
    onNext () {
      if (this.listdata.length) {
        this.$emit('onNextStep', this.listdata)
      } else {
        this.$message.warning({ content: '未添加发票信息', duration: 3 })
      }
    },
    onJump () {
      this.listdata = []
      this.$emit('onNextStep', this.listdata)
    },
    onPrevious () {
      this.$emit('onPrevious')
    }
  },
}
</script>

<style>
</style>